<template>
  <view class="content">
    <view class="header">
      <view class="userInfo">
        <u-image
          width="28px"
          height="25px"
          src="@/static/images/icon.png"
        ></u-image>
        <text>您好，{{ userName }}！</text>
      </view>
      <view class="position">
        <view class="point">
          <u-image
            width="22px"
            height="30px"
            src="@/static/images/position.png"
          ></u-image>
          <text>{{ position }}</text>
        </view>
        <view>
          <u-image
            width="25px"
            height="20px"
            src="@/static/images/down.png"
          ></u-image>
        </view>
      </view>
    </view>
    <view class="card" v-if="hasCard">
      <text>待使用电影票</text>
      <scroll-view class="ticket-list" :scroll-x="true">
        <view class="ticket" v-for="item in ticket" :key="item.id">
          <view class="title">
            <view>{{ item.movieName }}</view>
            <view>{{ item.operaName }}·{{ item.date }} {{ item.time }}</view>
          </view>
          <view class="code">
            <view>{{ item.code }}</view>
            <view @click="toTicketDetail(item.id)">查看详情 ></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="movie">
      <view>
        <text class="title">正在热映</text>
        <text class="more">查看更多 ></text>
      </view>

      <scroll-view class="movie-list" :scroll-x="true">
        <view
          v-for="item in movieList"
          :key="item.id"
          class="movie-item"
          @click="toDetail(item.id)"
        >
          <u-image
            :src="require('@/static/images/movie/' + item.imgSrc)"
            width="232rpx"
            height="342rpx"
          ></u-image>
          <text>{{ item.title }}</text>
        </view>
      </scroll-view>
    </view>
    <view class="movie">
      <view>
        <text class="title">即将上映</text>
        <text class="more">查看更多 ></text>
      </view>
      <scroll-view class="movie-list" :scroll-x="true">
        <view
          v-for="item in movieList"
          :key="item.id"
          class="movie-item"
          @click="toDetail(item.id)"
        >
          <u-image
            :src="require('@/static/images/movie/' + item.imgSrc)"
            width="232rpx"
            height="342rpx"
          ></u-image>
          <text>{{ item.title }}</text>
          <text class="show-time"> {{ item.release }}</text>
        </view>
      </scroll-view>
    </view>
    <view class="movie">
      <view>
        <text class="title">评分榜</text>
        <text class="more">查看更多 ></text>
      </view>
      <scroll-view class="movie-list" :scroll-x="true">
        <view
          v-for="item in movieList"
          :key="item.id"
          class="movie-item"
          @click="toDetail(item.id)"
        >
          <u-image
            :src="require('@/static/images/movie/' + item.imgSrc)"
            width="232rpx"
            height="342rpx"
          ></u-image>
          <view class="desc">
            <text>{{ item.title }}</text>
            <text class="score">{{ item.score }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts">
import PAGE from '@/const/page';
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = require('@/mock/movie/index.json');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ticketData = require('@/mock/ticket/index.json');

export default defineComponent({
  onLoad() {
    this.movieList = data.movies;
  },
  setup() {
    const state = reactive({
      userName: 'admin',
      position: '成都',
      hasCard: true,
    });

    const ticket = ticketData.tickets;

    const movieList = ref([]);
    return {
      ...toRefs(state),
      ticket,
      movieList,
    };
  },
  methods: {
    toDetail(id: string) {
      uni.navigateTo({
        url: PAGE.FILM_DETAIL.PATH + '?id=' + id,
      });
    },
    toTicketDetail(id: string) {
      console.log('详情');
      uni.navigateTo({
        url: PAGE.PERSONAL_TICKET_DETAIL.PATH + '?id=' + id,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 300rpx;
  background-image: url('@/static/images/chooseSeat.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .userInfo {
    display: flex;
    color: white;
    font-size: 38rpx;
    font-weight: 700;
    margin-left: 48rpx;
    margin-bottom: 50rpx;

    text {
      margin-left: 18rpx;
    }
  }

  .position {
    width: 100%;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0 64rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .point {
      display: flex;
      font-size: 36rpx;
      color: white;

      text {
        margin-left: 18rpx;
      }
    }
  }
}

.card {
  padding: 40rpx 0rpx;
  padding-left: 64rpx;

  text {
    font-size: 38rpx;
    font-weight: 700;
  }

  .ticket-list {
    width: 100%;
    white-space: nowrap;
    margin-top: 18rpx;

    .ticket {
      display: inline-block;
      width: 513rpx;
      height: 262rpx;
      background-image: url('@/static/images/ticket-bg.png');
      background-size: cover;
      margin-right: 50rpx;
      padding: 0 34rpx;

      .title {
        width: 100%;
        height: 142rpx;
        border-bottom: 1rpx dashed #fff;
        padding-top: 34rpx;

        view {
          &:first-child {
            color: white;
            font-size: 32rpx;
            font-weight: 700;
            margin-bottom: 14rpx;
          }

          &:last-child {
            color: #999;
            font-size: 24rpx;
            font-weight: 700;
          }
        }
      }

      .code {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        view {
          &:first-child {
            font-size: 26rpx;
            color: #f3b637;
            letter-spacing: 0.325rem;
          }

          &:last-child {
            font-size: 26rpx;
            color: #fff;
          }
        }
      }
    }
  }
}

.movie {
  width: 100%;
  height: 510rpx;
  padding-left: 64rpx;

  view {
    &:first-child {
      display: flex;
      justify-content: space-between;
    }
  }

  .title {
    font-size: 38rpx;
    font-weight: 700;
  }

  .more {
    color: #f3b637;
  }

  .movie-list {
    width: 100%;
    white-space: nowrap;
    padding: 40rpx 0rpx;

    .movie-item {
      display: inline-block;
      width: 232rpx;
      height: 342rpx;
      margin-right: 30rpx;
      display: inline-flex;
      flex-direction: column;
      align-items: center;

      text {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 10rpx 0rpx;
      }

      .show-time {
        color: #666;
        font-size: 24rpx;
      }

      .desc {
        width: 100%;
        text {
          display: inline-block;
          &:first-child {
            width: 180rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 10rpx 0rpx;
          }

          &:last-child {
            width: 52rpx;
            color: #f3b637;
          }
        }
      }
    }
  }
}
</style>
